I don’t want to offend any CSS purists out there, but the more I use CSS the more I realize that is isn’t the best tool in the toolbox for layout. I am not saying html tags such as table layouts are better, but I am saying that there were problems that CSS was written to resolve, and as I understand it HTML layouts and page design is one of them, but even after 10 years it is nowhere near where it needs to be in a few areas:

1. Feature set
2. Simplicity
3. Readability is low
4. Ability to translate functionality into an IDE is poor (as seen by the fact that there is not good CSS IDE)

A while back I found a three column layout and posted about it: https://www.rhyous.com/2011/02/26/the-perfect-layout-for-a-three-column-blog/

At the time, I thought, great someone has figured out all the complexities for me. Well, actually no, they didn’t.  Trying to implement this for a blog design has been a nightmare because I want even more features and adding them to the design has not worked out very well. The design is great, and the author, Matthew James Taylor, should not think that I am trashing his work. No, not at all. He provided an excellent solution. No, instead, I am trashing CSS and its sub-par implementation.

How is it that after so many years and so many versions, CSS is overly complex and the “tricks” such as making  div elements embedded in div elements as Matthew James Taylor used, work but barely and they cause almost as many problems as they solve.

Now I have a problem trying to make the columns on the left and right have rounded corners.  Not going to happen. The way the nested div elements were used to make the background color go all the way down also seems to mean that four rounded corners in each column extending the lengthe of the screen is not likely to happen without more CSS tricks.

I need to add a menu bar, as this layout didn’t have one, but I need the menu bar to also have a drop down menu for submenu items.  However, the way this CSS layout used the div inside div trick, makes the drop down menu below the middle column so that is a problem.

Had I used a table to layout my site, it would be done already. Now, it wouldn’t be the most maintainable but it would be done.  However, maybe a programming language such as PHP or ASP.NET could be used to improve the maintainability.

So to all those who are participating in the CSS standards, please go back to the drawing board when it comes to the layout:

1. It seems a sub-par job separating the design from the code.
2. It seems a sub-par job providing an easy tool for laying out a website. You have left us with a tool that is not good enough!
3. There are not any good IDEs for CSS and HTML (No, neither Dreamweaver or Expression Web are good for laying out web pages, but you know what, it isn’t the fault of the IDE!)

You did solve some of the easy parts quite well, most of the parts that are not “layout” but more just color schemes.

1. Change font-size and color works great.
2. Float something to the left, great.

However, a simple feature of “as tall as the page” or the idea of a few elements where all but one are fixed size and the one that isn’t stretches the width of the height of the screen doesn’t exist. It seems to be there for width, but not for height or else it is there but just too hard to get.  For example, look at the three column design.  The reason the author had to nest the div elements was to get the three column div elements to extend all the way to the bottom of the page.  Without this hack, when there are three columns (left, middle, right) normally each one is a different length.  Really, CSS hasn’t solved this with a simple solution, yet? Sorry to be critical, but after this long, it should be better.

Here is what I want it shouldn’t be so difficult.  These tags don’t exist, this is a hypothetical of what I want.  Funny that as I write this some is similar to WPF, which is far superior to CSS for layout design IMHO.

<div name="Header" width="stretch" height="100px"> .... </div>
<div name="Menu" width="stretch" height="sizetocontent> .. </div>
<div name="Columns" width="stretch">
    <Group type="Horizontal" width="stretch">
        <div name="LeftCol" width="250px" hight="stretch"> ... </div>
        <div name="MiddleColCol" width="stretch" hight="stretch" MinWidth="300"> ... </div>
        <div name="LeftCol" width="stretch" hight="stretch"> ... </div>
    </HorizontalGroup>
</div>
<div name="Header" width="stretch" height="100px"> .... </div>

First off, the readability of the above syntax is amazingly clear and simple (IMO) and one does not have to wonder what is intended.

So please, powers that be of CSS, lets start over. Yes, I am aware it could take a decade but it is worth it if this time, you get it right! Look at WPF, sure it is not exactly the same, but Microsoft invested a lot of time and money into Windows Forms and they still felt the need for a new solution in WPF and it has been around 6 years and still Windows Forms are around, but more an more everyone is moving to WPF. CSS should go the way of Windows Forms, and become the old solution that a better solution is designed to replace.

Here are some more articles where people agree that CSS needs to be replaced with a better tool.  Please note as you read these posts that I don’t think CSS sucks.  I think it was a descent tool written to solve a problem, and succeeded in some areas and failed in others, and now that we know what works and what doesn’t a new better tool should be developed that keeps what works in CSS bt also succeeds where CSS fails.

Ten reasons why CSS sucks « Greg’s Head

CSS Sucks (for layout) | Accidental Scientist (this is interesting because Layout is my main complaint)

Tables vs CSS: 15 points to consider when choosing (this one has a lot of links that are not in favor of CSS)

If you are a framer for a house, a hammer is better than a wrench for nailing nails.  But a nail-gun is better than a hammer. CSS is somewhere in between. Here is a good hammer/nail gun analogy to describe CSS. Once I had a nail gun but the air compressor wasn’t quite strong enough and didn’t send the nails all the way in. So I use the nail gun because this was still faster, and did all the nailing. Then I pulled out my hammer and to finish the job.  CSS is like a nail gun without enough air.  It is better than a hammer, but not as good as it could be.

Maybe CSS doesn’t need to go away, maybe it just needs to stop doing layout.  What if it just did size and color and decoration and a new tool integrated with HTML and CSS to do layouts. But maybe it is better to have one solution for design.